<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多列布局</title>
    <style>
        div{
            height: 300px;
            background: yellow;
            /* 列的个数 */
            column-count: 5;
            /* 列的间距 */
            column-gap: 30px;
            /* 列边框 */
            column-rule: 2px solid red;
            /* 列高度统一 balance:每列高度尽量统一 auto:每列填满*/
            column-fill: balance;
            /* 调整列宽   */
            /* column-width: 500px; */
        }
        h1{
            /*横跨所有*/
            column-span: all;
        }
    </style>
</head>
<body>
    <div>
        <h1>赵谦孙俪</h1>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem dolorum, repellendus consectetur cupiditate libero nesciunt doloribus aliquam, quod perferendis dolor odio optio delectus tempore. Expedita neque consectetur eos saepe placeat.
        Iusto voluptatem fuga pariatur maiores deserunt, fugiat eum nobis esse quas consectetur debitis. Nesciunt, qui facilis corrupti assumenda quod, rem impedit doloribus id soluta eligendi alias a, consectetur quam repellendus.
        Dignissimos velit nam, alias eligendi ut suscipit dolorum odio quisquam quaerat asperiores earum quasi vero enim temporibus unde quis! Voluptatum architecto delectus ex, minus provident eius nobis inventore iste? Aliquam!
        At animi perferendis, eos recusandae laboriosam dicta quaerat dignissimos delectus dolorum architecto, atque, eveniet fugiat nostrum in magnam dolorem asperiores. Atque voluptates magnam tenetur earum consequatur molestias architecto animi beatae!
        Libero eligendi labore illo! Pariatur recusandae fugiat ipsa iure nulla aperiam perspiciatis corrupti autem delectus aliquid explicabo, magnam, accusamus dignissimos. Dolorum labore iure tempora. Tempora saepe dolorem accusantium explicabo pariatur!
        Facere vero assumenda praesentium laudantium qui totam a, distinctio magni. Quae quod dicta delectus, exercitationem quo modi natus tenetur fugiat officia explicabo soluta harum quam officiis possimus atque, quia magni.
    </div>
</body>
</html>